import { memo, useEffect } from 'react';
import type { FC, PropsWithChildren } from 'react';
import { Spin } from 'antd';
import { resSlides } from '@/services/slides';
import { useRequest } from 'ahooks';
import HomeCategory from '@/pages/Home/components/HomeCategory';
import HomeHotUser from '@/pages/Home/components/HomeHotUser';
import HomeSlider from '@/pages/Home/components/HomeSlider';

const HomeSlidesContent: FC<PropsWithChildren<{}>> = () => {
  const { data, loading } = useRequest(resSlides, {
    defaultParams: [{ status: 1 }],
  });
  return (
    <Spin spinning={loading}>
      <div
        className={
          'bg-white rounded-lg flex justify-between h-[452px] p-8 mt-16'
        }
      >
        <section key={'left'} className={'w-[20%] h-full'}>
          <HomeCategory />
        </section>
        <section key={'slider'} className={'group w-[54%] pb-4'}>
          <section
            className={
              'flex rounded-xl bg-gray-50 justify-around transition items-center  group-hover:shadow-xl shadow-lg  py-4'
            }
          >
            <HomeSlider data={data ? data.list : []} />
          </section>
        </section>

        <section key={'right'} className={'w-[20%] h-full'}>
          <HomeHotUser />
        </section>
      </div>
    </Spin>
  );
};

export default memo(HomeSlidesContent);
